<!--操作日志列表-->
<template>
    <div class='app-container'>
        <div class='app-box clear'>
            <div class='inputbox'>
                <span class='fontcolor'>操作时间:</span>
                <el-date-picker format='yyyy-MM-dd' value-format='yyyy-MM-dd' size='mini' v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <!--  <red-datepicker  output="ctrl.dateRange"></red-datepicker> -->
                <span class='operate fontcolor'>用户名:</span>
                <el-input v-model="data.username" size="mini" class="wd150" placeholder="请输入内容" @keyup.enter.native="search"></el-input>
                <!--  <input type="text" class='util-input log-input'> -->
                <span class='operate fontcolor'>IP:</span>
                <!-- <input type="text" class='util-input log-input'> -->
                <el-input v-model="data.ip" size="mini" class="wd150" placeholder="请输入内容" @keyup.enter.native="search"></el-input>
                <!-- <button on-click='search()' class='util-search user-search util-search1'>搜索</button> -->
                <el-button size="mini" type="primary" v-on:click='search()' class='btn'>搜索</el-button>
            </div>
            
            <el-table v-loading="listLoading" :data="list" style="width: 100%" class='uti-table' stripe='true'>
                <el-table-column prop="userNameOrEmailAddress" label="用户名" width="250"></el-table-column>
                <el-table-column prop="clientIpAddress" label="ip地址" width="250"></el-table-column>
                <el-table-column prop="browserInfo" label="说明"></el-table-column>
                <el-table-column prop="creationTime" label="操作时间"></el-table-column>
            </el-table>
            <div class='page-right'>
                <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>
            </div>

        </div>
    </div>
</template>
<script>
export default {
  data() {
    return { 
      pagetotal: null,
      data: {
      	username:'',
      	ip:''
      },
      list: null,
      listLoading: false,
      value: [],
      currentPage: 2,
  	  getDay:null,
  	  page:1,
  	  st:'',
  	  et:''
      };
  },
  created() {
    this.getDateChange();
    if (this.$route.query.page) {
    	this.page = this.$route.query.page;
    }
    if (this.$route.query.st) {
    	this.st = this.$route.query.st;
    	this.value = [this.st]
    }
    if (this.$route.query.et) {
    	this.et = this.$route.query.et;
    	this.value = [this.st,this.et];
    }
    if (this.$route.query.user) {
    	this.data.username = this.$route.query.user;
    }
    if (this.$route.query.ip) {
    	this.data.ip = this.$route.query.ip;
    }   
    this.fillDate();
  },
  watch:{
  	'$route' (to, from) {
  		this.page = this.$route.query.page;
  		this.st = this.$route.query.st;
  		this.et = this.$route.query.et;
  		this.value = [this.st,this.et];
  		this.data.username = this.$route.query.user;
  		this.data.ip = this.$route.query.ip;
  		this.fillDate();
  	}
  },
  methods: {
  	getDateChange(){
  		var changeDate = new Date();
  		var changeYear = changeDate.getFullYear();
  		var changeMonth = changeDate.getMonth();
  		var changeDay = changeDate.getDay();
  		console.log(changeYear + '-' + changeMonth + '-' + changeDay);
  		this.getDay = changeYear + '-' + changeMonth + '-' + changeDay;
  	},
    formatDate(time, format = "YY-MM-DD hh:mm:ss") {
    	
      var date = new Date(time);

      var year = date.getFullYear(),
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
      var preArr = Array.apply(null, Array(10)).map(function(elem, index) {
        return "0" + index;
      }); ////开个长度为10的数组 格式为 00 01 02 03

      var newTime = format
        .replace(/YY/g, year)
        .replace(/MM/g, preArr[month] || month)
        .replace(/DD/g, preArr[day] || day)
        .replace(/hh/g, preArr[hour] || hour)
        .replace(/mm/g, preArr[min] || min)
        .replace(/ss/g, preArr[sec] || sec);

      return newTime;
    },
    fillDate() {
      this.listLoading=true;
      const that = this;
		this.st = this.value[0];
		this.et = this.value[1];
		let params = {
			pageIndex:this.page,
			startDate:this.st,
			endDate:this.et,
			username:this.data.username,
			ip:this.data.ip
		}
      this.post(params, "services/app/auditLog/GetUserLoginLogs").then(
        response => {
          console.log(response);
          if (response.success) {
          	this.listLoading=false;
            this.list = response.result.items;
            this.pagetotal = response.result.totalCount;
            this.currentPage = this.page;
          }
        }
      );
    },
    search() {
      let date = this.value;
      	let startDate, endDate;
      	if (date&&date.length !== 0) {
        	startDate = date[0];
        	endDate = date[1];
      	}
		this.$router.push({
			name:'operationlog',
			query:{
				page:1,
				st:startDate,
				et:endDate,
				user:this.data.username,
        ip:this.data.ip,
        time:new Date().getTime()
			}
		})
    },
    handleCurrentChange(val) {
		let date = this.value;
      	let startDate, endDate;
      	if (date&&date.length !== 0) {
        	startDate = date[0];
        	endDate = date[1];
      	}
		this.$router.push({
			name:'operationlog',
			query:{
				page:val,
				st:startDate,
				et:endDate,
				user:this.data.username,
        ip:this.data.ip,
        time:new Date().getTime()
			}
		})
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss"  scoped>
.app-box{
  font-size: 13px;
  border-radius: 3px;
  background: #fff;
  position: relative;
  .inputbox {
    .fontcolor {
      color: #606266;
      margin-right: 8px;
    }
  }
  .btn {
    margin-left: 15px;
  }
  .util-search1 {
    margin-left: 15px;
  }
  .operate {
    margin-left: 40px;
  }
  .util-table {
    border-bottom: 1px solid #fbfbfb;
    width: 100%;
    margin-top: 32px;
    th {
      border-bottom: 1px solid #eee;
      border-top: 1px solid #eee;
      height: 40px;
      padding: 0 8px;
      color: #333;
      background: #fbfbfb;
      font-weight: 500;
      text-align: left;
    }
    .util-tab {
      border-bottom: 1px solid #eee;
      height: 40px;
      padding: 0 8px;
      color: #333;
    }
    .adress {
      min-width: 120px;
    }
    .username {
      padding-left: 20px;
    }
    .time {
      padding-right: 30px;
    }
  }
  .uti-table {
    margin-top: 30px;
  }
  .page-right {
    width: 100%;
    text-align: right;
    margin-top: 30px;
  }
}
</style>
